
<template>
    <div class="dir-top-nowrap article-item">
        <NuxtLink class="cover" :to="{ name: 'article-id', params: { id: item.id } }">
            <img :src="item.cover" :alt="item.title">
        </NuxtLink>
        <div class="dir-top-nowrap main-center gap detailed">
            <div class="dir-top-nowrap gap">
                <div class="dir-left-nowrap cross-center gap">
                    <NuxtLink class="box-grow-1 t-omit title" :to="{ name: 'article-id', params: { id: item.id } }">
                        {{ item.title }}
                    </NuxtLink>
                    <div class="box-grow-0 time">{{ item.create_time }}</div>
                </div>
                <div class="dir-left-nowrap gap user">
                    <div class="box-grow-1 dir-left-nowrap cross-center" style="gap: 10px;">
                        <NuxtLink class="avatar" :to="{ name: 'user-userId', params: { userId: item.user_id } }">
                            <AppAvatar :src="item.user.avatar_url" size="30" round></AppAvatar>
                        </NuxtLink>
                        <NuxtLink class="name" :to="{ name: 'user-userId', params: { userId: item.user_id } }">
                            {{ item.user.nickname }}
                        </NuxtLink>
                    </div>
                    <div class="box-grow-0 cross-center source">
                        <template v-if="item.source_url">
                            <NuxtLink :href="item.source_url">
                                来自：{{ item.source }}
                            </NuxtLink>
                        </template>
                        <template v-else>
                            来自：{{ item.source }}
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="ArticleItem">
import { NuxtLink, AppAvatar } from "#components";
import type { Article, User } from "@/type";

export type ArticleItemProps = {
    item: Pick<Article & { user: Omit<User, 'password'> }, 'id' | 'title' | 'cover' | 'create_time' | 'source' | 'source_url' | 'user_id' | 'user'>
}

const props = withDefaults(defineProps<ArticleItemProps>(), {})

</script>

<style lang='scss' scoped>
.article-item {
    width: 394px;
    height: 344px;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s ease-in-out;

    &:hover {
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
        transform: scale(1.02);
    }

    .cover {
        width: 394px;
        height: 248px;
        background: #D8D8D8;
    }

    .detailed {
        height: 96px;
        padding: 0 20px;
        background-color: #fff;

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            line-height: 16px;
        }

        .time {
            font-size: 14px;
            font-weight: 400;
            color: #777777;
            line-height: 16px;
        }

        .user {

            .name {
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
            }

            .source {
                font-size: 14px;
                font-weight: 400;
                color: #777777;
                line-height: 16px;
            }
        }
    }
}
</style>